<template>
	<view class="content">
		<text class="title">员工登录</text>
		<view class="input-area">
			<view class="username">
				<text>账号</text>
				<input placeholder="输入用户名称" placeholder-style="color:#ccc" focus v-model="formData.username"
					:class="{'focused-input':isFocused[0]}" @blur="isFocused[0]=false" @focus="isFocused[0]=true" />
			</view>
			<view class="password">
				<text>密码</text>
				<input placeholder="输入密码" v-model="formData.password" placeholder-style="color:#ccc" type="password"
					:class="{'focused-input':isFocused[1]}" @blur="isFocused[1]=false" @focus="isFocused[1]=true" />
			</view>
		</view>
		<view class="button">
			<button type="default" @click="onBack" style="width: 35%;">返回</button>
			<button type="primary" @click="onLogin" style="background-color: #ff5a5f;width: 35%;">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		wxLogin
	} from '../../utiles/login';
	import {
		callCloudFun
	} from '../../utiles/callCloudFun';

	const formData = ref({
		username: 'lwf2',
		password: '123456',
	})
	const isFocused = ref([])

	onLoad(() => {
		const loginData = uni.getStorageSync('loginData')
		if (loginData.username) {
			formData.value = loginData
		}
	})

	const onLogin = async () => {
		if (formData.username === '' || formData.password === '') {
			uni.showToast({
				title: '账号或密码为空',
				icon: 'error'
			})
			return
		}
		callCloudFun('employeelogin', {
			loginData: formData.value
		}).then(res => {
			console.log("登录成功：", res);
			wx.setStorageSync('userInfo', {
				empId: res.id,
				job: res.job,
				name: res.name,
			})
			wx.setStorageSync('loginData', formData.value)
			if (res.job === '管理员' || res.job === '收银员') {
				wx.redirectTo({
					url: '/pages/admin/admin'
				})
			} else {
				wx.redirectTo({
					url: '/pages/employee/employee?job=' + res.job + '&name=' + res.name,
				})
			}
		})
	}

	const onBack = () => {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #f4e2d8);

		.title {
			align-content: center;
			font-size: 42rpx;
			font-weight: 600;
			color: #666;
		}

		.input-area {
			display: flex;
			flex-direction: column;
			gap: 80rpx;

			.username,
			.password {
				display: flex;
				flex-direction: row;
				width: 90%;
				justify-content: center;
				align-items: center;

				text {
					width: 80rpx;
					text-align: right;
				}

				input {
					background-color: #F8F8F8;
					border: 1rpx solid #ccc;
					border-radius: 10rpx;
					height: 40px;
					color: #666;
					margin: 0 20rpx;
					padding: 10rpx;
				}

				.focused-input {
					border-color: #007AFF;
					box-shadow: 0 0 5px rgba(0, 122, 255, 0.3);
					outline: none;
				}
			}
		}

		.button {
			display: flex;
			flex-direction: row;
			justify-content: center;
			width: 80%;
		}
	}
</style>